<template>
	<div>
		<div class="main clearfix" id="jhTable">
			<el-form :inline="true" :model="form" class="demo-form-inline" ref="empform">
				<div class="wrap">
					<el-form-item label="企业名称" prop="companyname">
						<el-input v-model="form.companyname" placeholder="输入企业名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="所在地区" prop="city">
						<city-Cascader :citys="form.citys" :level="level" @handleChange="handleCityChange" style="width: 200px"></city-Cascader>
					</el-form-item>
					<el-form-item label="企业类型" prop="companytype">
						<el-select v-model="form.companytype" placeholder="请选择" style="width: 200px" clearable>
							<el-option v-for="item in typeList" :key="item.dictid" :label="item.dictname" :value="item.dictid"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="企业规模" prop="companysize">
						<el-select v-model="form.companysize" placeholder="请选择" style="width: 200px" clearable>
							<el-option v-for="item in sizeList" :key="item.dictid" :label="item.dictname" :value="item.dictid"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="wrap">
					<el-form-item label="时间区间" >
						<el-date-picker v-model="timeSlot" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="消息类型排序" prop="msgtype">
						<el-select v-model="form.msgtype" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in msgList" :label="item" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<!-- <el-button style="width: 120px" @click="reset">重置</el-button> -->
						<el-button style="width: 120px" type="primary" @click="search">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table stripe border :data="list" size="small" style="width:100%">
				<el-table-column label="企业名称" align="center" width="200px">
					<template slot-scope="scope">
						<el-button @click="checkInfo(scope.row)" type="text" size="small" class="tabel_cell">{{scope.row.companyname}}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="registertime" label="注册日期" align="center"></el-table-column>
				<el-table-column prop="city" label="所在地区" align="center"></el-table-column>
				<el-table-column prop="companysizename" label="企业规模" align="center"></el-table-column>
				
				<el-table-column prop="resumenum" label="个人投递人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadresumenum" :hidden="scope.row.unreadresumenum == 0" :max="99" class="item">
							<el-button type="text" @click="linkTo(scope.row, 'resumeDelivery')" class="overflowNo">{{scope.row.resumenum || '0'}}</el-button>
						</el-badge>
						<!-- <i class="readNum" v-if="scope.row.resumenum>0">999</i> -->
					</template>
				</el-table-column>
				<el-table-column prop="recommendnum" label="平台推荐人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadrecommendnum" :hidden="scope.row.unreadrecommendnum == 0" :max="99" class="item">
							<el-button type="text" @click="linkTo(scope.row, 'recommendationNumber')">{{scope.row.recommendnum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column prop="companyinvitenum" label="企业邀约人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadcompanyinvitenum" :max="99" :hidden="scope.row.unreadcompanyinvitenum == 0"
						 class="item">
							<el-button type="text" @click="linkTo(scope.row, 'companyInvitation')">{{scope.row.companyinvitenum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column label="待面试人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadwaitinterviewnum" :hidden="scope.row.unreadwaitinterviewnum == 0" :max="99"
						 class="item">
							<el-button type="text" @click="linkTo(scope.row, 'noInterview')">{{scope.row.waitinterviewnum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column label="面试未通过人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadinterviewnotpassnum" :hidden="scope.row.unreadinterviewnotpassnum == 0" :max="99"
						 class="item">
							<el-button type="text" @click="linkTo(scope.row, 'failInterview')">{{scope.row.interviewnotpassnum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column label="已录用人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreademployeenum" :hidden="scope.row.unreademployeenum == 0" :max="99" class="item">
							<el-button type="text" @click="linkTo(scope.row, 'accepted', '1')">{{scope.row.employeenum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				
				<el-table-column label="满保障期人数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadoutsafeguardnum" :hidden="scope.row.unreadoutsafeguardnum == 0" :max="99" class="item">
							<el-button type="text" @click="linkTo(scope.row, 'guarantee')">{{scope.row.outsafeguardnum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>

				<el-table-column label="异常记录数" align="center">
					<template slot-scope="scope">
						<!-- 消息未读的气泡 -->
						<el-badge :value="scope.row.unreadinsafeguarddimissionnum" :hidden="scope.row.unreadinsafeguarddimissionnum == 0"
						 :max="99" class="item">
							<el-button type="text" @click="linkTo(scope.row, 'abnormalRecord', scope.row.insafeguarddimissionnum)">{{scope.row.insafeguarddimissionnum || '0'}}</el-button>
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column prop="rechargetotalmoney" label="充值总额" align="center"></el-table-column>
				<el-table-column prop="consumetotalmoney" label="成交总额" align="center"></el-table-column>
			</el-table>
			<div class="block" style="padding-top: 20px;">
				<el-pagination background :current-page="form.pagenum" :page-size="form.pagesize" layout="total, sizes, prev, pager, next, jumper"
				 :total="total" :page-sizes="[10, 20, 30, 50, 100]" @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
			</div>
		</div>
		<el-dialog :visible.sync="checkFlag" width="1040px" class="jhdialog">
			<check v-if="checkFlag" :companyName="info.companyname" :companyId="info.companyid" :type="'0'" :tabNum="'4'"></check>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "employment",
		components: {
			tab: () => import("../../../component/tab/index.vue"),
			cityCascader: () => import("../../../component/cityCascader/index.vue"),
			check: () => import("../../socical/socialCheck/check.vue")
		},
		props: ['msg'],
		data() {
			return {
				options: [{
						table: "3001",
						tablename: "企业招聘人员管理",
						buttonlist: [{
								button: "300101",
								buttonname: "会员拉黑"
							},
							{
								button: "300104",
								buttonname: "会员导出"
							},
							{
								button: "300102",
								buttonname: "会员提醒"
							},
							{
								button: "300103",
								buttonname: "上报(拉黑)"
							}
						],
						val: "0"
					},
					{
						table: "3002",
						tablename: "打卡记录",
						buttonlist: [{
								button: "300203",
								buttonname: "黑名单导出"
							},
							{
								button: "300201",
								buttonname: "会员还原"
							},
							{
								button: "300202",
								buttonname: "还原上报"
							}
						],
						val: "1"
					}
				],
				active_type: "0",
				timeSlot: [],
				form: {
					companyname: "",
					province: "",
					city: "",
					area: "",
					citys: [],
					companytype: "",
					companysize: "",
					pagenum: 1,
					pagesize: 10,
					msgtype: "注册时间",
				},
				level: "0",
				total: 0,
				list: [],
				list2: [], //打卡记录table
				typeList: [],
				sizeList: [],
				msgList: ["注册时间", "个人投递人数", "平台推荐人数", "企业邀约人数", "待面试人数", "面试未通过人数", "已录用人数", "满保障期人数", "异常记录数"],
				checkFlag: false,
				info: ""
			};
		},
		mounted() {
			this.getType();
			this.getSize();
			this.getTableData();
			this.getAuthority();
		},
		methods: {
			handleClick(item) {
				console.log("11");
				this.active_type = item.val;
			},
			getAuthority() {
				let userinfo = localStorage.getItem("userinfo");
				userinfo = JSON.parse(userinfo);
				this.level = userinfo.level;
				this.form.province = +userinfo.province || "";
				this.form.city = +userinfo.city || "";
				this.form.area = +userinfo.area || "";
				this.form.citys = [];
				this.form.citys.push(+userinfo.province);
				this.form.citys.push(+userinfo.city);
				this.form.citys.push(+userinfo.area);
			},
			// 获取企业类型
			getType() {
				this.$axios
					.post("/system/v1/common/dict", {
						groupid: "companytype"
					})
					.then(res => {
						if (res.data.message === "success.") {
							this.typeList = res.data.data;
							console.log(res);
						} else {
							this.$message({
								message: res.data.message,
								type: "error"
							});
						}
					});
			},
			// 获取企业规模
			getSize() {
				this.$axios
					.post("/system/v1/common/dict", {
						groupid: "companysize"
					})
					.then(res => {
						if (res.data.message === "success.") {
							this.sizeList = res.data.data;
						} else {
							this.$message({
								message: res.data.message,
								type: "error"
							});
						}
					});
			},
			// 获取列表数据
			getTableData() {
				// console.log(this.timeSlot);
				let params = {...this.form};
				if(this.timeSlot && this.timeSlot.length > 0){
					params.startTime = this.timeSlot[0];
					params.endTime = this.timeSlot[1];
				}
				this.$axios.post("/app/v1/platform/company/employList", params).then(res => {
				// this.$ceshiAxios.post("/v1/platform/company/employList", params).then(res => {
					if (res.data.code === 1) {
						console.log(res);
						let result = res.data.data;
						this.list = result.list;
						let msgAll = 0;
						for (let i = 0; i < this.list.length; i++) {
							msgAll = msgAll + parseInt(this.list[i].unreadresumenum) + parseInt(this.list[i].unreadrecommendnum) + parseInt(this.list[i].unreadcompanyinvitenum) + parseInt(this.list[i].unreadwaitinterviewnum) + parseInt(this.list[i].unreadinterviewnotpassnum) + parseInt(this.list[i].unreademployeenum) + parseInt(this.list[i].unreadoutsafeguardnum) + parseInt(this.list[i].unreadinsafeguarddimissionnum);
						};
						this.$emit('update:msg', msgAll);
						this.total = Number(result.totalnum);
					} else {
						this.$message({
							message: res.data.message,
							type: "error"
						});
					}
				});
			},
			handleCityChange(val) {
				this.form.citys = val;
				this.form.province = val[0];
				this.form.city = val[1];
				this.form.area = val[2];
			},
			// 搜索
			search() {
				this.form.pagenum = 1;
				this.getTableData();
			},
			// 重置
			reset() {
				this.$refs["empform"].resetFields();
				this.form.pagenum = 1;
				this.getAuthority();
			},
			linkTo({companyid}, name, params) {
				let query = {}
				if(name == 'resumeDelivery' || name == 'recommendationNumber' || name == 'companyInvitation' || name == 'noInterview' || name == 'failInterview' || name == 'accepted'){
					query.msgtype = this.form.msgtype;
					if(this.timeSlot && this.timeSlot.length > 0){
						query.startTime = this.timeSlot[0];
						query.endTime = this.timeSlot[1];
					}
				}
				
				if (!params) {
					this.$router.push({
						name,
						params: {
							companyid
						},
						query
					});
				} else {
					this.$router.push({
						name,
						params: {
							companyid,
							params
						},
						query
					});
				}
			},
			checkInfo(r) {
				console.log(r)
				this.checkFlag = true;
				this.info = r;
			},
			// 分页
			handleCurrentChange(val) {
				this.form.pagenum = val;
				this.getTableData();
			},
			handleSizeChange(val) {
				this.form.pagenum = 1;
				this.form.pagesize = val;
				this.getTableData();
			}
		}
	};
</script>


<style scoped src="./index.css"></style>
